<template>
  <div>
    <el-cascader
      clearable
      filterable
      :show-all-levels="false"
      :props="cascaderProps"
      :options="options"
      :placeholder="placeholder"
      v-model="list"
      @change="selectOption"
      style="
        width: 210px;
        display: inline-block;
        margin-left: 15px;
        vertical-align: bottom;
      "
      ref="createdCascader"
      :collapseTags="collapseTags"
    ></el-cascader>
  </div>
</template>

<script>
import {
  queryDeptMsg,
  queryUserMsg,
  permission,
} from "@/api/communityOperating/personalSop";
export default {
  name: "createdCascader",
  /**
   * type: 一个页面用两次组件，为了区分
   * placeholder：为空时的描述
   */
  props: {
    // type: String,
    placeholder: String,
    collapseTags:{
      type:Boolean,
      default:false,
    },
    cascaderProps:{
      type:Object,
      default:()=>{
        return {multiple: true}
      }
    }
  },
  data() {
    return {
      options: [],
      list: [],
      // cascaderProps: {
        // lazy: true,
        // multiple: true,
        // lazyLoad: (node, resolve) => {
        //   this.loadOptions(node, resolve);
        // },
      // },
    };
  },

  mounted() {
    this.queryDeptMsg();
  },

  methods: {
    // 查询执行员工
    queryDeptMsg() {
      let obj = {
        name: "",
        deptId: null,
        authFlag: "Y",
      };
      permission(obj).then((res) => {
        if (res.code === 200 && res.data.length) {
          res.data.forEach((item) => {
            this.options.push({
              id: item.userId,
              value: item.userId,
              label: item.userName,
              // children: [],
            });
          });
        }
      });
    },
    // 懒加载 执行员工,创建人
    loadOptions(parentNode, resolve) {
      let nodes = [];
      queryUserMsg({ deptId: parentNode.value }).then((res) => {
        if (res.code === 200) {
          if (res.data.length) {
            res.data.forEach((item) => {
              nodes.push({
                value: item.userId,
                label: item.userName,
                children: null,
                leaf: 1,
              });
            });
          } else {
            nodes = [];
          }
          resolve(nodes);
        }
      });
    },
    selectOption(select) {
      let obj = {
        // type: this.$props.type,
        select: [],
      };
      obj.select = select;
      this.$emit("select", obj);
    },
  },
};
</script>

<style lang="scss" scoped></style>
